<!-- 图片裁剪组件 license by http://eleadmin.com -->
<template>
  <div class="ele-cropper-tool">
    <el-button-group
      v-for="(buttons, index) in groups"
      :key="index"
      class="ele-cropper-tool-item"
    >
      <template v-for="name in buttons">
        <el-button
          v-if="name === 'zoomIn'"
          :key="name"
          type="primary"
          icon="el-icon-zoom-in"
          :title="t('ele.cropper.zoomIn')"
          @click="zoomIn"
        />
        <el-button
          v-else-if="name === 'zoomOut'"
          :key="name"
          type="primary"
          icon="el-icon-zoom-out"
          :title="t('ele.cropper.zoomOut')"
          @click="zoomOut"
        />
        <el-button
          v-else-if="name === 'rotateL'"
          :key="name"
          type="primary"
          icon="el-icon-refresh-left"
          :title="t('ele.cropper.rotateLeft')"
          @click="rotateL"
        />
        <el-button
          v-else-if="name === 'rotateR'"
          :key="name"
          type="primary"
          icon="el-icon-refresh-right"
          :title="t('ele.cropper.rotateRight')"
          @click="rotateR"
        />
        <el-button
          v-else-if="name === 'moveL'"
          :key="name"
          type="primary"
          icon="el-icon-back"
          :title="t('ele.cropper.moveLeft')"
          @click="moveL"
        />
        <el-button
          v-else-if="name === 'moveR'"
          :key="name"
          type="primary"
          icon="el-icon-right"
          :title="t('ele.cropper.moveRight')"
          @click="moveR"
        />
        <el-button
          v-else-if="name === 'moveT'"
          :key="name"
          type="primary"
          icon="el-icon-top"
          :title="t('ele.cropper.moveUp')"
          @click="moveT"
        />
        <el-button
          v-else-if="name === 'moveB'"
          :key="name"
          type="primary"
          icon="el-icon-bottom"
          :title="t('ele.cropper.moveDown')"
          @click="moveB"
        />
        <el-button
          v-else-if="name === 'scaleX'"
          :key="name"
          type="primary"
          icon="el-icon-sort ele-cropper-icon-scale-x"
          :title="t('ele.cropper.flipX')"
          @click="scaleX"
        />
        <el-button
          v-else-if="name === 'scaleY'"
          :key="name"
          type="primary"
          icon="el-icon-sort"
          :title="t('ele.cropper.flipY')"
          @click="scaleY"
        />
        <el-button
          v-else-if="name === 'reset'"
          :key="name"
          type="primary"
          icon="el-icon-refresh"
          :title="t('ele.cropper.reset')"
          @click="reset"
        />
        <el-upload
          v-else-if="name === 'upload'"
          :key="name"
          action=""
          :accept="accept"
          :show-file-list="false"
          :before-upload="onUpload"
        >
          <el-button
            :title="t('ele.cropper.upload')"
            icon="el-icon-upload2"
            type="primary"
          />
        </el-upload>
        <el-button
          v-else-if="name === 'crop'"
          :key="name"
          type="primary"
          icon="el-icon-check"
          @click="crop"
        >
          {{ okText }}
        </el-button>
      </template>
    </el-button-group>
  </div>
</template>

<script>
  import Locale from 'element-ui/lib/mixins/locale';
  const DEFAULT_TOOLS = [
    'zoomIn, zoomOut',
    'moveL, moveR, moveT, moveB',
    'rotateL, rotateR',
    'scaleX, scaleY',
    'reset, upload',
    'crop'
  ].join(' | ');

  export default {
    name: 'EleCropperTools',
    mixins: [Locale],
    emits: [
      'crop',
      'move-b',
      'move-l',
      'move-r',
      'move-t',
      'reset',
      'rotate-l',
      'rotate-r',
      'scale-x',
      'scale-y',
      'replace',
      'zoom-in',
      'zoom-out'
    ],
    props: {
      // 操作按钮布局
      tools: {
        type: String,
        default: DEFAULT_TOOLS
      },
      // 允许上传的图片类型
      accept: {
        type: String,
        default: 'image/*'
      },
      // 完成按钮文字
      okText: String
    },
    computed: {
      // 解析按钮布局
      groups() {
        return (
          this.tools?.split('|')?.map((g) => {
            return g?.split(',')?.map((t) => t?.trim());
          }) ?? []
        );
      }
    },
    methods: {
      zoomIn() {
        this.$emit('zoom-in');
      },
      zoomOut() {
        this.$emit('zoom-out');
      },
      scaleX() {
        this.$emit('scale-x');
      },
      scaleY() {
        this.$emit('scale-y');
      },
      rotateL() {
        this.$emit('rotate-l');
      },
      rotateR() {
        this.$emit('rotate-r');
      },
      moveL() {
        this.$emit('move-l');
      },
      moveR() {
        this.$emit('move-r');
      },
      moveT() {
        this.$emit('move-t');
      },
      moveB() {
        this.$emit('move-b');
      },
      reset() {
        this.$emit('reset');
      },
      crop() {
        this.$emit('crop');
      },
      onUpload(file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.$emit('replace', {
            data: e.target?.result,
            type: file.type
          });
        };
        reader.readAsDataURL(file);
        return false;
      }
    }
  };
</script>

<style lang="scss">
  /* 操作按钮 */
  .ele-cropper-tool {
    margin-top: 10px;

    .ele-cropper-tool-item {
      margin-top: 10px;
      margin-right: 18px;
      vertical-align: top;

      &:last-child {
        margin-right: 0 !important;
      }

      & > div {
        display: inline-block;
      }
    }

    .el-button {
      padding-left: 12px;
      padding-right: 12px;
    }

    .el-upload .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    .ele-cropper-icon-scale-x {
      transform: rotate(90deg);
    }
  }

  /* 小屏幕适应 */
  @media screen and (max-width: 768px) {
    .ele-cropper-tool {
      .ele-cropper-tool-item {
        margin-right: 6px;
      }

      .el-button {
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }
</style>
